import React, { Component } from 'react';
import {
    StyleSheet, 
    View,
    Image,
    Text,
    TouchableOpacity,
    ImageBackground,
    processColor,
    BackHandler,
    Animated,
    SafeAreaView,
    Platform,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';
// import { PieChart } from 'react-native-charts-wrapper';
import { Echarts, echarts } from 'react-native-secharts';
import { RRCLoading, RRCToast } from 'react-native-overlayer';
import ImagePicker from 'react-native-image-crop-picker';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import HeaderBar from '../component/HeaderBar';
// import BaseComponent from '../component/BaseComponent';
import DeviceInfo from 'react-native-device-info';
import ExtraDimensions from 'react-native-extra-dimensions-android';
import HttpUtil from '../util/HttpUtil';
import {NavigationEvents} from 'react-navigation';
import InfraredModule from '../component/Infrared';

const chartHeight = Platform.OS == 'ios' && getScreenHeight() > 667 ? getScreenHeight() - getPixel(344) : Platform.OS === 'android' && DeviceInfo.getDeviceId() === 'rk30sdk' ? getScreenHeight() - getPixel(210) : Platform.OS === 'android' ? getScreenHeight() - getPixel(204) - ExtraDimensions.getStatusBarHeight() - 10 : getScreenHeight() - getPixel(304);
let that = {};
export default class Main extends Component {

    constructor(props){
        super(props);
        this.state={
            assetCount: 0,
            sendCardCount: 0,
            inventoryCount: 0,
            moveCount: 0,
            values: [0],
            homeMenus:['资产绑定','资产盘点','批量变更','资产查询'],
            menus:['资产绑定','资产盘点','批量变更','资产查询'],
            // legend: {
            //     enabled: false,
            //     textSize: 15,
            //     form: 'CIRCLE',
        
            //     horizontalAlignment: "RIGHT",
            //     verticalAlignment: "CENTER",
            //     orientation: "VERTICAL",
            //     wordWrapEnabled: true
            // },
            // highlights: [{x:0}],
            // description: {
            //     text: '',
            // },
            fadeAnim: new Animated.Value(-(getScreenWidth() / 2)),        //-(getScreenWidth() / 2)
            option : { },
        }
        this.echart1 = React.createRef();
        that = this;
    }
    
    onBackClicked = () => {
        let lastBackPressed = 0;
        if(this.props.navigation.isFocused()) {//判断   该页面是否处于聚焦状态
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
              ImagePicker.clean().then(() => {

              }).catch(e => {
                BackHandler.exitApp();//直接退出APP
              });
              //最近2秒内按过back键，可以退出应用。
              // return false;
              BackHandler.exitApp();//直接退出APP
            }else{
              this.lastBackPressed = Date.now();
              RRCToast.show('再按一次退出应用', 2, 3000);
              return true;
            }
        }
    }

    componentDidMount() {
        this.init();
    }

    componentWillUnmount() {
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            if(InfraredModule.getState() === 'init'){
                InfraredModule.destory();
                //console.log('释放了首页的红外读头 状态:'+InfraredModule.getState());
            }
            
            if(this.infraredListener){
                this.infraredListener.remove();
                //console.log('释放了首页的红外监听');
            }
        }
    }
    
    // next(values) {
    //     return {
    //         data: {
    //             dataSets: [{
    //               values:  values,
    //               label: '',
    //               config: {
    //                 colors: [processColor('#FFAA2E'), processColor('#FF6B81'), processColor('#4A69DD'), processColor('#409FFF'), processColor('#FF8C9D')],
    //                 valueTextSize: 20,
    //                 valueTextColor: processColor('#333'),
    //                 sliceSpace: 5,
    //                 selectionShift: 13,
    //                 // xValuePosition: "OUTSIDE_SLICE",
    //                 // yValuePosition: "OUTSIDE_SLICE",
    //                 valueFormatter: "#",
    //                 valueLineColor: processColor('#333'),
    //                 valueLinePart1Length: 0.5
    //               }
    //             }],
    //         }
    //     }
    // }


    init = () => {
        RRCLoading.setLoadingOptions({
            text: '加载中',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        RRCLoading.show();
        HttpUtil.post('indexData', null)
            .then(result => { 
                if(result.httpCode == 200){
                    //console.log(result.data.statusCountList);
                    RRCLoading.hide();
                    this.setState({
                        assetCount: result.data.assetCount,
                        sendCardCount: result.data.sendCardCount,
                        inventoryCount: result.data.inventoryCount,
                        moveCount: result.data.moveCount,
                        values: result.data.statusCountList,
                    });
                    if(result.menus && result.menus.length>0){
                        this.setState({
                            menus:result.menus,
                        })
                    }
                    if(result.homeMenus && result.homeMenus.length>0){
                        this.setState({
                            homeMenus:result.homeMenus,
                        })
                    }

                    for (let i = 0; i < result.data.statusCountList.length; i++) {
                        var item = result.data.statusCountList[i];
                        item.name = item.label;
                    }

                    // let res = { series: [], yAxis: [] };
                    // for (let i = 0; i < result.data.statusCountList.length; i++) {
                    //     res.series.push({
                    //         name: '资产数',
                    //         type: 'pie',
                    //         clockWise: false, //顺时加载
                    //         hoverAnimation: false, //鼠标移入变大
                    //         radius: [90 - i * 15 + '%', 82 - i * 15 + '%'],
                    //         center: ["50%", "50%"],
                    //         label: {
                    //             show: false
                    //         },
                    //         itemStyle: {
                    //             label: {
                    //                 show: false,
                    //             },
                    //             labelLine: {
                    //                 show: false
                    //             },
                    //             borderWidth: 5,
                    //         },
                    //         data: [{
                    //             value: result.data.statusCountList[i].value,
                    //             name: result.data.statusCountList[i].label
                    //         }, {
                    //             value: result.data.assetCount - result.data.statusCountList[i].value,
                    //             name: '',
                    //             itemStyle: {
                    //                 color: "rgba(0,0,0,0)",
                    //                 borderWidth: 0
                    //             },
                    //             tooltip: {
                    //                 show: false
                    //             },
                    //             hoverAnimation: false
                    //         }]
                    //     });
                    //     res.series.push({
                    //         name: '',
                    //         type: 'pie',
                    //         silent: true,
                    //         z: 1,
                    //         clockWise: false, //顺时加载
                    //         hoverAnimation: false, //鼠标移入变大
                    //         radius: [90 - i * 15 + '%', 82 - i * 15 + '%'],
                    //         center: ["50%", "50%"],
                    //         label: {
                    //             show: false
                    //         },
                    //         itemStyle: {
                    //             label: {
                    //                 show: false,
                    //             },
                    //             labelLine: {
                    //                 show: false
                    //             },
                    //             borderWidth: 5,
                    //         },
                    //         data: [{
                    //             value: 8.5,
                    //             itemStyle: {
                    //                 color: "#E3F0FF",
                    //                 borderWidth: 0
                    //             },
                    //             tooltip: {
                    //                 show: false
                    //             },
                    //             hoverAnimation: false
                    //         }, {
                    //             value: 1.5,
                    //             name: '',
                    //             itemStyle: {
                    //                 color: "rgba(0,0,0,0)",
                    //                 borderWidth: 0
                    //             },
                    //             tooltip: {
                    //                 show: false
                    //             },
                    //             hoverAnimation: false
                    //         }]
                    //     });
                    //     res.yAxis.push((result.data.statusCountList[i].label ? result.data.statusCountList[i].label : '') + '：' + (result.data.statusCountList[i].value / result.data.assetCount * 100).toFixed(2) + "%");
                    // }
                    let res = { series: [{
                        name: 'Asset Data',
                        center:['50%', '60%'],
                        type: 'pie',
                        radius:  ['20%', '50%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                          },
                        //重点
                        label : {
                            formatter: '{b}:{c}({d}%)',
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 12
                            },
                              position:'outside',
                              alignTo:'edge',
                              //edgeDistance = '25%',
                              margin:5,
                        },
                        data:result.data.statusCountList,
                        emphasis: {
                          itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                        }
                      }], yAxis: [] };
                    this.setState({
                        option: {
                            backgroundColor:'#fff',
                            tooltip: {
                                show: true,
                                trigger: "item",
                                formatter: "{a}<br>{b}:{c}({d}%)"
                            },
                            color: ['#389af4','#ff8c37','#ffc257','#fd6f97','#a181fc'],
                            grid: {
                                top: 20,
                                bottom: (chartHeight - 50 )/ 2  ,
                                left: "50%",
                                containLabel: false
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'horizontal',
                                top: '5%',
                                left:'5%',
                                right:'5%'
                              },
                            yAxis: [{
                                type: 'category',
                                inverse: true,
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    interval: 0,
                                    inside: true,
                                    textStyle: {
                                        color: "#000",
                                        fontSize: 12,
                                    },
                                    show: true
                                },
                                data: res.yAxis
                            }],
                            xAxis: [{
                                show: false
                            }],
                            series: res.series
                        }
                    });
                }else{
                    RRCLoading.hide();
                    RRCToast.show('系统异常', 1, 3000);
                }
            })
            .catch(error => {
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            })
    }

    initCard = () => {
        this.props.navigation.navigate('Asset', { 
            tab: 1, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            }
        });
        this.closeMenu();
    }
    supplement = () => {
        this.props.navigation.navigate('Asset', { 
            tab: 2, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            }
        });
        this.closeMenu();
    }

    inventory =() => {
        this.props.navigation.navigate('Inventory',{
            callBack: () => {
                this.init();
            }        
        });
        this.closeMenu();
    }

    locationChange = () => {
        
        // if(this.state.tab == 2){
        //     this.closeMenu();
        // }else{
        //     this.scrollableTabView.goToPage(2)
        // }
        // this.scrollableTabView.goToPage(2)
        // this.closeMenu();
        this.props.navigation.navigate('LocationChange',{
            callBack: () => {
                this.init();
            } 
        });
        this.closeMenu();
    }

    dataSync = () => {
        this.props.navigation.navigate('DataSync',{
            callBack: () => {
                this.init();
            }
        });
        this.closeMenu();
    }

    move =() => {
        // this.props.navigation.navigate('Asset', { 
        //     tab: 2, 
        //     callBack: () => {
        //         this.init();
        //     }
        // });
        // this.closeMenu();
        this.props.navigation.navigate('AddMove',{
            callBack: () => {
                this.init();
            } 
        });
        this.closeMenu();
    }

    install =() => {
        this.props.navigation.navigate('InstallEquipment',{
            callBack: () => {
                this.init();
            } 
        });
        this.closeMenu();
    }

    search =() => {
        this.props.navigation.navigate('Asset', { 
            tab: 0, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            } 
        });
        this.closeMenu();
    }
    assetPay =() => {
        this.props.navigation.navigate('AssetPay',{
            callBack: () => {
                this.init();
            } 
        });
        this.closeMenu();
    }

    logout = () =>{
        RRCLoading.setLoadingOptions({
            text: '正在退出',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        RRCLoading.show();
        HttpUtil.post('user/logout', null)
            .then(result => { 
                if(result.httpCode == 200){
                    RRCLoading.hide();
                    global.variables.user = null;
                    this.props.navigation.navigate('Login');
                }else{
                    RRCLoading.hide();
                    RRCToast.show('系统异常', 1, 3000);
                }
            })
            .catch(error => {
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            })
    }

    showMenu = () => {
        Animated.timing(                            // 随时间变化而执行的动画类型
            this.state.fadeAnim,                      // 动画中的变量值
            {
              toValue: 0,                             
            }
        ).start();   
    }

    closeMenu = () => {
        Animated.timing(                            // 随时间变化而执行的动画类型
            this.state.fadeAnim,                      // 动画中的变量值
            {
              toValue: -(getScreenWidth() / 2),                             
            }
        ).start();  
    }

    scan = (code) => {
        that.props.navigation.navigate('Asset', { 
            tab: 0, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            },
            code: code,
        });
    }

    submit = (text) => {

        this.props.navigation.navigate('Asset', { 
            tab: 0, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            },
            keyWord: text,
        });
    }

    gotoStatistics = () => {
        this.props.navigation.navigate('Statistics');
    }

    infraredReceived=(code)=> {
        this.props.navigation.navigate('Asset', { 
            tab: 0, 
            menus:this.state.menus,
            callBack: () => {
                this.init();
            },
            code: code[0],
        });
    }

    regBack(){  
        if (Platform.OS === 'android') {
            BackHandler.addEventListener("hardwareBackPress", this.onBackClicked);
        }
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            // 红外测试
            //console.log('首页的红外读头状态:'+InfraredModule.getState());
            if(InfraredModule.getState() === 'uninit'){
                InfraredModule.init();
                //console.log('首页红外初始化完成')
            }
            this.infraredListener = DeviceEventEmitter.addListener('onInfraredReveice', this.infraredReceived);
        }
    }

    unRegBack(){
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener("hardwareBackPress", this.onBackClicked);
        }
        this.componentWillUnmount();
    }

    render() {

        const { values,homeMenus,menus } = this.state;
        // const config = this.next(values);

        return (
            <SafeAreaView style={styles.container}>
                <NavigationEvents onDidFocus={() => this.regBack() } onDidBlur={() => this.unRegBack()}/>
                <HeaderBar navigation={ this.props.navigation } menuClink={ () => this.showMenu()} scan= {this.scan} submit= {this.submit} />
                <ImageBackground source={require('../images/bg.png')} style={{ width: getScreenWidth(), height: getPixel(175), resizeMode: 'contain' }} >
                    <View style={{ height: getPixel(70), paddingTop: getPixel(5), paddingLeft: getPixel(40), flexDirection: 'row' }}>
                        <View style={{width: '50%'}}>
                            <Text style={{ fontSize: getPixel(24), color: '#FFF', }}>{ this.state.assetCount }</Text>
                            <Text style={{ fontSize: getPixel(12), color: '#A7B9FF', }}>全部资产数（台）</Text>
                        </View> 
                        { DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                        <View style={{ width: '50%', paddingRight:getPixel(20), height: getPixel(60), justifyContent: 'center', alignItems: 'flex-end'}}>
                            <TouchableOpacity onPress={() => this.gotoStatistics()}>
                                <Text style={{ fontSize: getPixel(16), color: '#FFF', textDecorationLine:'underline' }}>IT资产统计</Text>
                            </TouchableOpacity>
                        </View>:null}
                    </View>
                    <View style={{ height: getPixel(70), paddingTop: 0, flexDirection: 'row' }}>
                        <TouchableOpacity onPress={() => this.initCard()}>
                            <View style={{ width: getScreenWidth() / 3, alignItems: 'center' }}>
                                <Text style={{ fontSize: getPixel(16), color: '#FFF', }}>{ this.state.sendCardCount }</Text>
                                <Text style={{ fontSize: getPixel(12), color: '#A7B9FF', }}>待发卡</Text>
                            </View>
                        </TouchableOpacity>
                        <View style={{ width: 1, height: getPixel(20), marginTop: getPixel(12), borderRightWidth: 1, borderRightColor: '#A7B9FF' }}>
                        </View>
                        <TouchableOpacity onPress={() => this.inventory()}>
                            <View style={{ width: getScreenWidth() / 3 - getPixel(2), alignItems: 'center' }}>
                                <Text style={{ fontSize: getPixel(16), color: '#FFF', }}>{ this.state.inventoryCount }</Text>
                                <Text style={{ fontSize: getPixel(12), color: '#A7B9FF', }}>待盘点</Text>
                            </View>
                        </TouchableOpacity>
                        <View style={{ width: 1, height: getPixel(20), marginTop: getPixel(12), borderRightWidth: 1, borderRightColor: '#A7B9FF' }}>
                        </View>
                        <TouchableOpacity onPress={() => this.locationChange()}>
                            <View style={{ width: getScreenWidth() / 3, alignItems: 'center' }}>
                                <Text style={{ fontSize: getPixel(16), color: '#FFF', }}>{ this.state.moveCount }</Text>
                                <Text style={{ fontSize: getPixel(12), color: '#A7B9FF', }}>待迁移</Text>
                            </View>
                        </TouchableOpacity>
                    </View>    
                </ImageBackground>
                
                <View style={ styles.content }>
                        
                    <View style={styles.chart} >
                        <View style={{ flexDirection: 'row' }}>
                            <Text style={{ marginLeft: getPixel(10), fontSize: getPixel(16), color: '#333', height: getPixel(50), width: getPixel(100), textAlign: 'center', lineHeight: getPixel(50) }}>总资产数: </Text>
                            <Text style={{ marginTop:getPixel(11),paddingLeft: getPixel(10), paddingRight: getPixel(10), color:'#fff', fontSize: getPixel(16), height: getPixel(28), backgroundColor: '#58CEB6', borderRadius: getPixel(10), textAlign: 'center', lineHeight: getPixel(28)}}>{this.state.assetCount} </Text>
                        </View>
                        <View style={{ flex: 1 }}>
                                <Echarts ref={this.echart1} option={this.state.option} 
                                  height={ Platform.OS == 'ios' && getScreenHeight() > 667 ? getScreenHeight() - getPixel(404) : Platform.OS === 'android' && DeviceInfo.getDeviceId() === 'rk30sdk' ? getScreenHeight() - getPixel(380) : Platform.OS === 'android' ? getScreenHeight() - getPixel(334) - ExtraDimensions.getStatusBarHeight() - 10 : getScreenHeight() - getPixel(364)  } 
                                />  
                        </View>
                    </View>
                     
                </View>
                <View style={[styles.buttonGroup,Platform.OS == 'ios' && getScreenHeight() > 667 ? { bottom: getPixel(50), } : DeviceInfo.getDeviceId() == 'rk30sdk'? { bottom: getPixel(20), }:null ]} >
                    {/* {homeMenus.indexOf("资产发卡")>-1? <TouchableOpacity onPress={() => this.initCard()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b1.png')} style={ styles.buttonImg }/>
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产发卡</Text>
                        </View>
                    </TouchableOpacity>:null} */}
                    {homeMenus.indexOf("资产绑定")>-1? <TouchableOpacity onPress={() => this.initCard()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b5.png')} style={ styles.buttonImg }/>
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产绑定</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("资产盘点")>-1? <TouchableOpacity onPress={() => this.inventory()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b2.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产盘点</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("批量变更")>-1?<TouchableOpacity onPress={() => this.move()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b3.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>批量变更</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("位置迁移")>-1?<TouchableOpacity onPress={() => this.locationChange()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b3.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>位置迁移</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("资产查询")>-1?<TouchableOpacity onPress={() => this.search()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b4.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产查询</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("信息补录")>-1?<TouchableOpacity onPress={() => this.supplement()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b6.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>信息补录</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("资产装机")>-1?<TouchableOpacity onPress={() => this.install()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b7.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产装机</Text>
                        </View>
                    </TouchableOpacity>:null}
                    {homeMenus.indexOf("资产交付")>-1?<TouchableOpacity onPress={() => this.assetPay()}>
                        <View style={ styles.button }>
                            <Image source={ require('../images/b8.png')} style={ styles.buttonImg } />
                            <Text style={{ fontSize: getPixel(12), color: '#FFF', }}>资产交付</Text>
                        </View>
                    </TouchableOpacity>:null}
                </View> 
                <Animated.View style={[{ alignItems:'center', elevation: 4, left: this.state.fadeAnim, position: 'absolute',width:getScreenWidth() / 2, backgroundColor: '#FFF' }, Platform.OS == 'ios' ? { height: getScreenHeight() - getPixel(30), marginTop: getPixel(30)}:{ height: getScreenHeight()}]}>
                    <View style={{ width:getScreenWidth() / 2, alignItems:'flex-end', paddingTop: getPixel(10), paddingRight: getPixel(10) }}>
                        <TouchableOpacity onPress={() => this.closeMenu()}>
                        <Image source={ require('../images/close_menu.png')} style={{width: getPixel(25),height: getPixel(25)}} />
                        </TouchableOpacity>
                    </View>
                    <Image source={ require('../images/default_user.png')} style={{width: getPixel(70),height: getPixel(70), marginTop: getPixel(10)}} />
                    <Text style={{ color:'#333', marginTop: getPixel(0), textAlign:'center', fontSize:getPixel(20), height: getPixel(60), lineHeight: getPixel(60)}}>{global.variables.user.name}</Text>
                    <ScrollView style={{paddingLeft: getPixel(20), paddingRight: getPixel(20),}}>
                        <TouchableOpacity onPress={() => this.closeMenu()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_home.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>首页</Text>
                            </View>
                        </TouchableOpacity>
                        {menus.indexOf("资产查询")>-1?<TouchableOpacity onPress={() => this.search()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_asset.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>资产查询</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("资产绑定")>-1?<TouchableOpacity onPress={() => this.initCard()}>
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_bind.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>资产绑定</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("信息补录")>-1?<TouchableOpacity onPress={() => this.supplement()}>
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_msg.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}}/>
                                <Text style={styles.menuText }>信息补录</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("资产装机")>-1?<TouchableOpacity onPress={() => this.install()}>
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_equipment.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}}/>
                                <Text style={styles.menuText }>资产装机</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("资产交付")>-1?<TouchableOpacity onPress={() => this.assetPay()}>
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_pay.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}}/>
                                <Text style={styles.menuText }>资产交付</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("资产盘点")>-1?<TouchableOpacity onPress={() => this.inventory()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_inventory.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>资产盘点</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("批量变更")>-1?<TouchableOpacity onPress={() => this.move()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_move.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>批量变更</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {menus.indexOf("位置迁移")>-1?<TouchableOpacity onPress={() => this.locationChange()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_pos.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>位置迁移</Text>
                            </View>
                        </TouchableOpacity>:null}
                        {global.variables.useMode==1?<TouchableOpacity onPress={() => this.dataSync()}> 
                            <View style={ styles.menu }>
                                <Image source={ require('../images/icon_pos.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={styles.menuText }>数据同步</Text>
                            </View>
                        </TouchableOpacity>:null}
                        <TouchableOpacity style={[{height : 40,marginTop: getScreenHeight() - getPixel(610)},Platform.OS == 'ios' ? { marginTop: getScreenHeight() - getPixel(510) }:null]} onPress={() => this.logout()}> 
                            <View style={styles.logout}>
                                <Image source={ require('../images/logout.png')} style={{width: getPixel(25),height: getPixel(25), marginTop: getPixel(3)}} />
                                <Text style={[styles.menuText,{color:'#FFF',fontWeight:'bold'}] }>注销</Text>
                            </View>
                        </TouchableOpacity>
                    </ScrollView>
                </Animated.View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        marginLeft: getPixel(0),
        marginRight: getPixel(0),
        alignItems: 'center',
        height: getScreenHeight(),
    },

    content: {
        width: getScreenWidth(), 
        //height: getScreenHeight() - getPixel(244),
        alignItems: 'center',
    },

    chart: {
        position: 'absolute',
        width: getScreenWidth() - getPixel(35), 
        //height: Platform.OS === 'ios' ? getScreenHeight() - getPixel(304) : getScreenHeight() - getPixel(304),
        //height: Platform.OS == 'ios' && getScreenHeight() > 667 ? { height: getScreenHeight() - getPixel(344) } : DeviceInfo.getDeviceId() == 'rk30sdk'? { height: getScreenHeight() - getPixel(320) } : { height: ExtraDimensions.getRealWindowHeight() - getPixel(364) } 
        height: Platform.OS == 'ios' && getScreenHeight() > 667 ? getScreenHeight() - getPixel(344) : Platform.OS === 'android' && DeviceInfo.getDeviceId() === 'rk30sdk' ? getScreenHeight() - getPixel(320) : Platform.OS === 'android' ? getScreenHeight() - getPixel(274) - 10 : getScreenHeight() - getPixel(304),
        marginTop: getPixel(-20),
        borderRadius: 10,
        backgroundColor: '#FFF',
        elevation: 3,
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
    },

    buttonGroup: {
        flexDirection: 'row',
        position: 'absolute',
        bottom: Platform.OS === 'ios' ? getPixel(10) : getPixel(10),
        height: getPixel(59),
    },

    button: {
        width: getScreenWidth() / 4 - 12, 
        height: getPixel(55), 
        backgroundColor: '#6484FA',
        borderRadius: 10,
        margin: 2,
        alignItems: 'center',
        paddingTop: 3,
        paddingBottom: 3,
    },

    buttonImg: {
        resizeMode: 'contain', 
        width: getPixel(30), 
        height: getPixel(30),
    },
    menu: {
        height: getPixel(40),
        borderBottomColor: '#EEE',
        borderBottomWidth: 1,
        width: getScreenWidth() / 2 - getPixel(40),
        flexDirection:'row',
        alignItems: 'center',
    },
    menuText: {
        marginLeft: getPixel(10),
        height: getPixel(40),
        lineHeight: getPixel(40),
        color:'#666',
        fontSize: getPixel(16),
    },

    logout: {
        paddingLeft: getPixel(15),
        flexDirection:'row',
        alignItems: 'center',
        height: getPixel(40),
        width: getPixel(100),
        backgroundColor:'#FF6B81',
        borderRadius: 10,
        marginLeft: getPixel(30),
        //marginTop: getScreenHeight() - getPixel(480),
    },
});